<template>
  <el-dialog
    ref="wkDialog"
    :title="title"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="false"
    top="8vh"
    :width="templatePreviewShow ? '1300px' : '900px'"
    @close="close">
    <div
      v-loading="loading"
      class="log-wrap">
      <div
        :class="{'right-hide': !templatePreviewShow}"
        class="wrap-left">
        <div

          class="create-log">
          <flexbox
            v-if="templateData"
            class="create-log-header">
            <div
              v-if="templateData.iconClass"
              :style="{ backgroundColor: templateData.iconColor }"
              class="header-icon">
              <i :class="templateData.iconClass" />
            </div>
            <div class="header-label text-one-line">{{ templateData.name }}</div>
            <span
              v-if="completeInfo.status !== 0"
              class="complete-btn"
              @click="completeClick">
              <span class="complete-btn__name">完成情况<span class="value">{{ completeInfo.completeNum }}</span>/<span class="value">{{ completeInfo.totalNum }}</span></span>
            </span>
          </flexbox>

          <div class="create-log-content">
            <el-form
              ref="oaForm"
              :model="fieldForm"
              :rules="fieldRules"
              :validate-on-rule-change="false"
              class="wk-form"
              label-position="top">
              <wk-form-items
                v-for="(children, index) in fieldList"
                :key="index"
                :field-from="fieldForm"
                :field-list="children"
                @change="formChange"
              />
            </el-form>

            <add-image-list
              v-if="imgFiles.length > 0"
              :data="imgFiles"
              @delete="deleteImage"
              @delete-all="deleteAllFile(2)"
              @upload="uploadFile" />
            <!-- 附件 -->
            <div v-if="files.length > 0" class="content-title">附件：({{ files.length }})</div>
            <div
              v-if="files.length > 0"
              class="affix-all">
              <file-cell
                :file-list="files"
                :show-delete="true"
                @delete="deleteFile" />
            </div>
          </div>
          <div class="add-control">
            <div
              class="control-item"
              @click="barClick('img')">
              <el-tooltip effect="dark" content="图片" placement="top">
                <span class="icon wk wk-picture" />
              </el-tooltip>
            </div>
            <div
              class="control-item"
              @click="barClick('file')">
              <el-tooltip effect="dark" content="附件" placement="top">
                <span class="icon wk wk-file" />
              </el-tooltip>
            </div>
            <div
              v-if="templateData.customSend === 1 || allSendUserDeptList.length > 0"
              class="control-item">
              <span class="cursor-default">发送给：</span>
              <el-tooltip
                v-for="(item, index) in showSendUserList"
                :key="index"
                :class="{'is-close': allSendUserDeptList.length > maxSendShowCount}"
                placement="top"
                :content="item.realname || item.name"
                class="send-user">
                <xr-avatar
                  :id="item.userId"
                  :name="item.realname || item.name"
                  :size="32"
                  :disabled="!item.userId"
                  :src="item.img" />
              </el-tooltip>
              <el-dropdown
                v-if="allSendUserDeptList.length > maxSendShowCount"
                trigger="click"
                :hide-on-click="false">
                <el-button class="dropdown-btn">
                  +{{ allSendUserDeptList.length - maxSendShowCount }}
                </el-button>
                <el-dropdown-menu slot="dropdown" class="send-list-dropdown">
                  <el-dropdown-item
                    v-for="(item,index) in closeSendUserDeptList"
                    :key="index"
                    class="send-list-dropdown-list">
                    <p class="send-list-dropdown-text">{{ item.realname || item.name }} </p>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <members-dep
                v-if="templateData.customSend === 1"
                :content-block="false"
                :user-checked-data="sendUserList"
                :dep-checked-data="sendDeptList"
                @popoverSubmit="sendUserChange">
                <i
                  slot="membersDep"
                  class="el-icon-plus add-user-btn" />
              </members-dep>
            </div>
          </div>

          <!-- 附件 -->
          <input
            ref="fileInput"
            accept="*.*"
            type="file"
            class="file-input"
            multiple
            @change="uploadFile">
          <input
            ref="imgInput"
            accept="image/*"
            type="file"
            class="file-input"
            multiple
            @change="uploadFile">
        </div>
      </div>
      <div v-if="templatePreviewShow" class="wrap-right">
        <print
          ref="print"
          :default-query="{
            showTips: false,
            dataType: 'fields',
            templateId: logTemplateId,
            showTyeSelect: false
          }"
          :data="fieldForm"
          :edit-data="formData"
          @pint-templates-change="pintTemplatesChange"
        >

          <flexbox
            slot="header"
            class="create-log-header">
            <div class="header-label text-one-line">预览</div>
            <div style="display: flex;">
              <el-select
                v-model="printTemplateId"
                style="width: 170px;"
                class="header-select"
                @change="templateChange">
                <el-option
                  v-for="item in templateList"
                  :key="item.templateId"
                  :label="item.templateName"
                  :value="item.templateId" />
              </el-select>
              <el-button
                style="margin-left: 8px;"
                @click="printClick">打印</el-button>
            </div>
          </flexbox>
        </print>
      </div>
    </div>
    <span
      slot="footer"
      class="dialog-footer">
      <el-button
        v-debounce="sureClick"
        type="primary">保存</el-button>
      <el-button @click="close()">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  journalAddAPI,
  oaLogCompleteStatsAPI,
  oaLogTemplateFieldByLogId,
  oaLogTemplateFieldByCreate,
  oaLogTemplateFieldVerifyAPI
} from '@/api/oa/journal'
import { crmFileDeleteAPI, crmFileRemoveByBatchIdAPI } from '@/api/common'
import {
  oaLogTemplateDetailAPI
} from '@/api/admin/oa'

import AddImageList from '@/components/QuickAdd/AddImageList'
import MembersDep from '@/components/SelectEmployee/MembersDep'
import FileCell from '@/components/FileCell'
import WkFormItems from '@/components/NewCom/WkForm/WkFormItems'
import Print from '@/views/oa/workLog/print'

import CustomFieldsMixin from '@/mixins/CustomFields'
import {
  getFileTypeIcon,
  guid,
  getImageData,
  objDeepCopy,
  getFileIconWithFileName
} from '@/utils/index'
import { debounce } from 'throttle-debounce'

export default {
  name: 'CreateLog',
  components: {
    AddImageList,
    MembersDep,
    FileCell,
    WkFormItems,
    Print
  },
  mixins: [CustomFieldsMixin],
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    templateId: [String, Number], // 日志模板id
    formData: Object,
    // 附件
    accessoryFileList: {
      type: Array,
      default: () => {
        return []
      }
    },
    imgFileList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      templateData: {}, // 模板信息
      fieldList: [],
      fieldForm: {},
      fieldRules: {},
      form: {}, // 文本内容
      // 关联简报
      getBulletin: 0,
      loading: false,
      categoryIdMap: {
        day: 1, // 日报
        week: 2, // 周报
        month: 3 // 月报
      },
      // 用于在图片类型下不上传附件
      showRelativeType: '',
      imgFiles: [],
      files: [],
      // 批次ID
      batchId: guid(),
      maxSendShowCount: 3, // 最大发送人展示数量
      sendUserList: [], // 发送人
      sendDeptList: [], // 发送部门
      completeInfo: {
        completeNum: 0,
        totalNum: 0
      }, // 完成信息
      // 打印模板id
      printTemplateId: '',
      templateList: [],
      tinymceHeight: document.documentElement.clientHeight - 310,

      // 默认模板布局展示，如果没有模板时隐藏
      templatePreviewShow: true
    }
  },
  computed: {
    // 是编辑
    isEdit() {
      return !!this.formData
    },
    title() {
      return this.isEdit ? '编辑日志' : '新建日志'
    },
    // 日志模板id
    logTemplateId() {
      return this.isEdit ? this.formData.categoryId : this.templateId
    },

    // 展示的发送人
    showSendUserList() {
      return this.allSendUserDeptList.slice(0, this.maxSendShowCount)
    },

    // 全部发送人
    allSendUserDeptList() {
      const defaultSendUserList = (this.templateData.sendUserList || []).map(item => {
        item.disabled = true
        return item
      })
      const defaultSendDeptList = (this.templateData.sendDeptList || []).map(item => {
        item.disabled = true
        return item
      })
      const parentLevelUserList = (this.templateData.parentLevelUserList || []).map(item => {
        item.disabled = true
        return item
      })

      return defaultSendUserList.concat(defaultSendDeptList).concat(parentLevelUserList).concat(this.sendUserList).concat(this.sendDeptList)
    },

    // 闭合起来的员工和部门
    closeSendUserDeptList() {
      return this.allSendUserDeptList.slice(this.maxSendShowCount)
    }
  },
  created() {
    this.debouncedRefreshPrintContentByField = debounce(500, this.refreshPrintContentByField)

    // 是编辑
    if (this.formData) {
      this.initEditInfo()
    }

    this.getInitConfig()
  },
  methods: {
    /**
     * @description: 获取初始化配置信息
     * @return {*}
     */
    getInitConfig() {
      const templateRequest = this.isEdit ? oaLogTemplateFieldByLogId : oaLogTemplateFieldByCreate
      const tempalteParams = this.isEdit ? {
        logId: this.formData.logId,
        configId: this.logTemplateId // 存的模板id
      } : {
        configId: this.logTemplateId
      }

      this.loading = true
      Promise.all([
        oaLogTemplateDetailAPI(this.logTemplateId), // 获取模板详情
        templateRequest(tempalteParams)
      ]).then(resArr => {
        if (resArr[0]) {
          const templateData = resArr[0].data
          const temps = templateData.templateIcon ? templateData.templateIcon.split(',') : []
          if (temps.length > 1) {
            templateData.iconClass = temps[0]
            templateData.iconColor = temps[1]
          } else {
            templateData.iconClass = ''
            templateData.iconColor = ''
          }
          this.templateData = templateData
        }

        if (resArr[1]) {
          this.getFields(resArr[1])
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })

      this.getCompelteInfo()
    },

    /**
     * @description: 获取新建所需自定义字段
     * @return {*}
     */
    getFields(res) {
      const list = res.data || []
      const fieldList = []
      const fieldForm = {}

      list.forEach(children => {
        const fields = []
        children.forEach(item => {
          const temp = this.getFormItemDefaultProperty(item)
          temp.show = true
          const canEdit = this.getItemIsCanEdit(item, this.isEdit ? 'update' : 'save')
          // 是否可编辑
          temp.disabled = !canEdit
          // 特殊字段允许多选
          this.getItemRadio(item, temp)

          // 获取默认值
          if (temp.show) {
            fieldForm[temp.field] = this.getItemValue(item, this.formData, this.isEdit ? 'update' : 'save')
          }
          fields.push(temp)
        })
        fieldList.push(fields)
      })
      this.fieldList = fieldList

      const result = this.getFormContentByOptionsChange(fieldList, fieldForm)
      this.fieldForm = result.fieldForm
      this.fieldRules = result.fieldRules
    },

    /**
     * 验证唯一
     */
    UniquePromise({ field, value }) {
      return new Promise((resolve, reject) => {
        var validatesParams = {}
        validatesParams.fieldId = field.fieldId
        const realValue = this.getRealParams(field, value)
        validatesParams.value = realValue && typeof realValue === 'object' ? JSON.stringify(realValue) : realValue
        if (this.formData) {
          validatesParams.dataId = this.formData.logId
        }

        oaLogTemplateFieldVerifyAPI(validatesParams).then(res => {
          // status 1 通过 0
          const resData = res.data || {}
          if (resData.status === 1) {
            resolve()
          } else {
            reject(`${field.name}已存在`)
          }
        }).catch(() => {
          reject()
        })
      })
    },

    /**
     * change
     */
    formChange(field, index, value, valueList) {
      if ([
        'select',
        'checkbox'
      ].includes(field.formType) &&
          field.remark === 'options_type' &&
          field.optionsData) {
        const { fieldForm, fieldRules } = this.getFormContentByOptionsChange(this.fieldList, this.fieldForm)
        this.fieldForm = fieldForm
        this.fieldRules = fieldRules
      }
      // 刷新打印
      this.debouncedRefreshPrintContentByField(field.fieldName)
    },

    /**
     * @description: 根据字段名刷新预览页面内容
     * @param {*} fieldName
     * @return {*}
     */
    refreshPrintContentByField(fieldName) {
      if (!this.$refs.print) return
      this.$refs.print.refreshContentByField(fieldName)
    },

    /**
     * 初始化编辑数据
     */
    initEditInfo() {
      const editFormData = objDeepCopy(this.formData)

      // form 初始化位置

      if (editFormData.batchId) {
        this.batchId = editFormData.batchId
      }

      // 图片 附件
      this.imgFiles = objDeepCopy(this.imgFileList)
      for (let index = 0; index < this.imgFiles.length; index++) {
        this.setImageList(this.imgFiles[index], index)
      }
      this.files = objDeepCopy(this.accessoryFileList).map(item => {
        item.icon = getFileIconWithFileName(item.name)
        return item
      })

      // 发送人
      this.sendUserList = editFormData.sendUserList || []
      this.sendDeptList = editFormData.sendDeptList || []

      // 简报
      this.getBulletin = editFormData.getBulletin
    },

    /**
     * 获取图片内容
     */
    setImageList(item, index) {
      getImageData(item.url).then((data) => {
        item.url = data.src
        this.imageFileList.splice(index, 1, item)
      }).catch(() => {})
    },

    /**
     * 保存日志
     */
    sureClick() {
      // 校验日志规则
      // 校验长度 limitFlag 1 开启
      if (this.templateData.limitFlag) {
        const textareaFieldNames = []
        this.fieldList.forEach(children => {
          children.forEach(item => {
            if (item.formType === 'textarea' || item.formType === 'rich_text_format') {
              textareaFieldNames.push(item.fieldName)
            }
          })
        })

        let totalLength = 0
        textareaFieldNames.forEach(fieldName => {
          const textValue = this.fieldForm[fieldName]
          if (textValue) totalLength += textValue.length
        })

        const min = this.templateData.min || 0
        const max = this.templateData.max || Infinity

        if (totalLength < min) {
          this.$message.error(`日志内容长度需大于${min}, 当前长度${totalLength}`)
          return
        } else if (totalLength > max) {
          this.$message.error(`日志内容长度需小于${max}, 当前长度${totalLength}`)
          return
        }
      }

      this.loading = true
      const oaForm = this.$refs.oaForm
      oaForm.validate(valid => {
        if (valid) {
          const filedParams = this.getSubmiteParams([].concat.apply([], this.fieldList), this.fieldForm)

          const defaultSendUserList = (this.templateData.sendUserIdList || [])
          const defaultSendDeptList = (this.templateData.sendDeptIdList || [])
          const parentLevelUserList = (this.templateData.parentLevelUserList || []).map(item => item.userId)

          const selectedUserList = this.sendUserList.map(item => item.userId)
          const selectedDeptList = this.sendDeptList.map(item => item.id || item.deptId)

          const params = {
            ...filedParams.entity,
            field: filedParams.field,
            batchId: this.batchId,
            sendUserIds: Array.from(new Set(defaultSendUserList.concat(parentLevelUserList).concat(selectedUserList))).join(','),
            sendDeptIds: Array.from(new Set(defaultSendDeptList.concat(selectedDeptList))).join(',')
          }

          params.getBulletin = this.getBulletin // 1为关联销售简报

          params.categoryId = this.logTemplateId
          if (this.isEdit) {
            params.logId = this.formData.logId
            params.categoryId = this.logTemplateId
          }

          if (this.$refs.print) {
            params.printContent = this.$refs.print.content
            params.printTemplateId = this.printTemplateId
          }

          journalAddAPI(params)
            .then(() => {
              this.loading = false
              this.resetData()
              this.$emit('update')
              this.$message.success(this.isEdit ? '编辑成功' : '添加成功')
              this.close()
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          this.loading = false
          // 提示第一个error
          this.getFormErrorMessage(oaForm)
          return false
        }
      })
    },

    /**
     * 重置信息
     */
    resetData() {
      this.fieldForm = {}
      this.getBulletin = 0
      this.batchId = guid()
      this.imgFiles = []
      this.files = []
      this.sendUserList = []
      this.sendDeptList = []
    },

    /**
     * 图片和关联按钮事件
     */
    barClick(type) {
      this.showRelativeType = type
      if (type == 'file') {
        this.$refs.fileInput.click()
      } else if (type == 'img') {
        this.$refs.imgInput.click()
      }
    },

    /**
     * 图片选择出发
     */
    uploadFile(event) {
      var files = event.target.files
      if (files.length) {
        for (let index = 0; index < files.length; index++) {
          const file = files[index]
          if (
            file.type.indexOf('image') == -1 &&
            this.showRelativeType == 'img'
          ) {
            this.$message.error('请上传正确的文件类型')
            return
          }
        }

        var type = event.target.accept == 'image/*' ? 'img' : 'file'
        for (let index = 0; index < files.length; index++) {
          const file = files[index]
          this.uploadFileRequest(file, type)
        }
        event.target.value = ''
      }
    },

    /**
     * 文件上传
     */
    uploadFileRequest(file, type, result) {
      this.$wkUploadFile.upload({
        file: file,
        params: {
          type: type,
          batchId: this.batchId
        }
      }).then(({ res }) => {
        const data = res.data || {}
        if (type == 'img') {
          this.imgFiles.push(data)
        } else {
          data['icon'] = getFileTypeIcon(file)
          this.files.push(data)
        }
        if (result) {
          result()
        }
      }).catch(() => {})
    },

    /**
     * 图片附件删除
     */
    deleteImage(item, index) {
      this.deleteImgOrFile('image', item, index)
    },

    deleteFile(item, index) {
      // this.deleteImgOrFile('file', item, index)
      this.files.splice(index, 1)
    },

    deleteImgOrFile(type, item, index) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          crmFileDeleteAPI({
            id: item.fileId
          })
            .then(res => {
              if (type == 'image') {
                this.imgFiles.splice(index, 1)
              } else {
                this.files.splice(index, 1)
              }
              this.$message.success('操作成功')
            })
            .catch(() => {})
        })
        .catch(() => {})
    },

    /**
     * 删除全部 type 1 是附件 2 是图片
     */
    deleteAllFile(type) {
      if (this.batchId) {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            crmFileRemoveByBatchIdAPI({
              batchId: this.batchId,
              type
            })
              .then(res => {
                if (type == 2) {
                  this.imgFiles = []
                } else {
                  this.files = []
                }
                this.$message.success('操作成功')
              })
              .catch(() => {})
          })
          .catch(() => {})
      }
    },

    /**
     * 发送人选择
     */
    sendUserChange(users, depts) {
      this.sendUserList = users
      this.sendDeptList = depts
    },

    /**
     * 完成情况点击
     */
    completeClick() {
      this.$emit('completeSelect', this.logTemplateId)
    },

    /**
     * 获取完成概要
     */
    getCompelteInfo() {
      oaLogCompleteStatsAPI({
        configId: this.logTemplateId
      })
        .then(res => {
          this.completeInfo = res.data || {}
        })
        .catch(() => {})
    },

    /**
     * 关闭
     */
    close() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },

    /**
     * @description: 打印
     * @return {*}
     */
    printClick() {
      this.$refs.print.compactPrint()
    },

    /**
     * @description: 模板change
     * @return {*}
     */
    templateChange() {
      this.$refs.print.templateChange(this.printTemplateId)
    },

    /**
     * @description: 获取末班数据
     * @param {*} data
     * @return {*}
     */
    pintTemplatesChange(data) {
      this.templateList = data
      this.templatePreviewShow = data && data.length > 0
      // 如果是编辑，默认展示编辑时候的id
      if (this.isEdit && this.formData.printTemplateId) {
        this.printTemplateId = this.formData.printTemplateId
      } else if (this.templatePreviewShow) {
        this.printTemplateId = data[0].templateId
      }
    }
  }
}
</script>

<style scoped lang="scss">
.el-dialog__wrapper {
  ::v-deep .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
  }
}

.log-wrap {
  display: flex;
  height: 70vh;

  .wrap-left {
    position: relative;
    flex-shrink: 0;
    width: 510px;
    height: 100%;
    overflow-y: auto;

    &.right-hide {
      width: 100%;
    }
  }

  .wrap-right {
    position: relative;
    flex: 1;
    height: 100%;
    margin-left: 24px;
    overflow-y: auto;
  }
}

.create-log {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;

  &-header {
    flex-shrink: 0;

    .header-icon {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: $--border-radius-base;

      .wk {
        font-size: 24px;
        color: white;
      }
    }

    .header-label {
      flex: 1;
      font-size: 16px;
      font-weight: 600;
    }

    .header-icon + .header-label {
      margin-left: 8px;
    }

    ::v-deep .header-select {
      .el-input__inner {
        border: none;
      }
    }
  }

  &-content {
    flex: 1;
    margin-top: 8px;
    overflow-y: auto;
  }

  .el-form {
    position: relative;
    margin-top: 8px;
    margin-left: -12px;

    ::v-deep .el-form-item {
      margin-bottom: 10px;
      font-size: 14px;

      .el-form-item__label {
        margin-bottom: $--interval-base;
        font-weight: bold;
        line-height: 1.5;
      }
    }

    .close-icon {
      position: absolute;
      top: 0;
      right: 20px;
      font-size: 18px;
      color: #d9d9d9;
      cursor: pointer;

      &:hover {
        color: $--color-primary;
      }
    }
  }

  .add-control {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;

    .control-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      cursor: pointer;

      .icon {
        margin-right: 5px;
      }

      .add-user-btn {
        padding: 6px 5.5px 5px;
        margin-left: 7px;
        font-size: 12px;
        border: 2px dotted $--border-color-base;
        border-radius: 50%;
        transform: scale(0.8);
      }

      &:hover {
        color: $--color-primary;

        .add-user-btn {
          border-color: $--color-primary;
        }
      }
    }

    .control-relevance {
      .el-switch {
        margin: 0 8px;
      }
    }

    .others {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: flex-end;

      .el-button--small {
        padding: 7px 14px;
      }
    }
  }
}

.file-input {
  display: none;
}

// 参与人
.send-user {
  position: relative;
  display: inline-block;

  &.is-close {
    border: 3px solid #fff;
    border-radius: 50%;
  }

  &.is-close + &.is-close {
    margin-left: -13px !important;
  }
}

.send-user + .send-user {
  margin-left: 7px;
}

.send-list-dropdown {
  width: 200px;
  max-height: 300px;
  overflow-y: auto;

  &-list {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    border-left: 2px solid $--color-white;

    &:hover {
      background: $--color-n20 !important;
      border-left: 2px solid $--color-b400;
    }

    &:hover .send-list-dropdown-i {
      display: inline-block;
      color: $--color-n500;
    }

    &:hover .send-list-dropdown-text {
      color: $--color-n500;
    }
  }

  &-text {
    display: inline-block;
    width: 80px;
    height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &-i {
    position: absolute;
    top: 18px;
    right: 10px;
    display: none;
    margin-left: 60px;
  }
}

.more-user-btn {
  padding: 5px;
  margin-left: 7px;
  font-size: 12px;
  background-color: #f3f7ff;
  border-radius: 50%;

  &:hover {
    color: white;
    background-color: $--color-primary;
  }
}

.cursor-default {
  color: $--color-text-primary;
  cursor: default;
}

// 完成情况
.complete-btn {
  z-index: 1;
  display: inline-block;
  padding: 5px 10px;
  color: $--color-primary;
  cursor: pointer;
  background-color: #ecf1ff;
  border-radius: 13px;

  &__name {
    .value:first-child {
      margin-left: 4px;
    }
  }
}

.content-title {
  margin-bottom: $--interval-base;
  font-weight: bold;
  color: $--color-text-secondary;
}

.affix-all {
  margin-right: 1px;
  margin-bottom: 30px;
  margin-left: 1px;
}

::v-deep .wk-print-container {
  height: 100%;

  .el-header {
    height: auto !important;
    padding: 0;
    box-shadow: none;
  }

  .el-main {
    margin-top: 8px;
  }
}
</style>
